<template>
  <div id="questionnaire-preview" class="clear">
    <div class="under-header-fixed-container">
      <div class="page-title-holder main-container container-limited flex content-space-between">
        <h2 class="page-title">问卷预览</h2>
        <div>
          <el-button size="small" type="success" @click="goRelease">{{ releaseLabel }}</el-button>
          <el-button size="small" type="primary" @click="goEdit">编辑问卷</el-button>
          <el-button size="small" class="m-r-10" @click="backList">返回目录</el-button>
        </div>
      </div>
    </div>
    <div class="main-container container-fluid container-limited page-holder clear">
      <div v-if="Object.keys(questionnaire).length" class="questionnaire-paper paper-card">
        <div class="questionnaire-content">
          <el-input class="title" v-model="questionnaire.title" placeholder="编辑问卷标题" readonly/>
          <el-input v-if="questionnaire.desc" v-model="questionnaire.desc" readonly
                    type="textarea" :rows="1" autosize class="desc m-t-24" placeholder="添加问卷说明"/>
          <Questions class="m-t-24" :questions="questionnaire.questions" :editable="false"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import Questions from './Questions';

export default {
  name: 'QuestionnairePreview', // 问卷预览
  components: { Questions },
  computed: {
    ...mapState({ questionnaire: 'currentQuestionnaire' }),
    qnId() { return this.$route.params.qnId; },
    // 发布问卷的描述
    releaseLabel() { return this.questionnaire.released ? '修改发布' : '发布问卷'; },
  },
  methods: {
    // 前往发布当前问卷
    goRelease() { this.$router.push(`/${this.$rp.QUESTIONNAIRES}/${this.qnId}/${this.$rp.RELEASE}`); },
    // 前往编辑当前问卷
    goEdit() { this.$router.push(`/${this.$rp.QUESTIONNAIRES}/${this.qnId}/${this.$rp.UPDATE}`); },
    // 返回问卷目录
    backList() { this.$router.push(`/${this.$rp.QUESTIONNAIRES}`); },
  },
};
</script>

<style></style>
